<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->

<table class="table" *ngIf="!isLoading" mat-table [dataSource]="data" fixedLayout="true">
  <caption>
    {{
      'models.caption' | translate
    }}
  </caption>
  <ng-container matColumnDef="content">
    <td mat-cell *matCellDef="let element">
      <div class="content--wrapper mat-subheading-1">
        <span class="content--wrapper_name" matTooltip="{{ element.name }}" [matTooltipDisabled]="disableToolTip(element.name)">
          {{ element.name }}
        </span>
        <span class="content--wrapper_type mat-caption" [ngClass]="element.type | lowercase">
          {{ getKeyType(element.type) | titlecase }}
        </span>
      </div>
      <div class="content--wrapper mat-body-2">
        <div class="content--wrapper_key">
          <span class="title">API-Key: </span>
          <span class="key">{{ element.apiKey }}</span>
        </div>
        <button class="content--wrapper_btn" mat-icon-button (click)="copyApiKey.emit(element.apiKey)">
          <mat-icon svgIcon="copy"></mat-icon>
        </button>
      </div>
    </td>
  </ng-container>
  <ng-container matColumnDef="test">
    <td mat-cell *matCellDef="let element">
      <button class="test--btn" color="accent" mat-flat-button (click)="test.emit(element)">
        <span>{{ 'models.select_menu.test' | translate }}</span>
      </button>
    </td>
  </ng-container>
  <ng-container matColumnDef="actions">
    <td mat-cell *matCellDef="let element">
      <ng-container *ngIf="userRole !== roleEnum.User">
        <button class="actions--btn" mat-icon-button [matMenuTriggerFor]="menu" aria-label="model actions">
          <mat-icon svgIcon="more-vert_new" inline="true"></mat-icon>
        </button>
        <mat-menu #menu="matMenu" xPosition="before">
          <button mat-menu-item (click)="edit.emit(element)">
            <span>{{ 'models.select_menu.edit' | translate }}</span>
          </button>
          <button mat-menu-item (click)="delete.emit(element)">
            <span>{{ 'models.select_menu.delete' | translate }}</span>
          </button>
          <button mat-menu-item (click)="clone.emit(element)">
            <span>{{ 'models.select_menu.clone' | translate }}</span>
          </button>
          <ng-container *ngIf="element.type === types.Recognition">
            <button mat-menu-item (click)="collection.emit(element)">
              <span>{{ 'models.mange_collection' | translate }}</span>
            </button>
          </ng-container>
        </mat-menu>
      </ng-container>
    </td>
  </ng-container>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<ng-container *ngIf="data.length < 1 && !isLoading">
  <div class="create-new-message">
    <mat-icon svgIcon="info_new" inline="true"></mat-icon>
    <p class="mat-caption">{{ 'users.search.no_results' | translate }}</p>
  </div>
</ng-container>
